<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 二、WebApi 事件 -->
    <!-- 获取/修改表单中元素属性内容 -->
    <!-- 1.获取：获取文本框中的内容 -->
    <input id="t1" type="text">
    <button id="b1">点击一下</button>  <br>
    <script>
        let input1 = document.querySelector('#t1');
        let button1 = document.querySelector('#b1');
        button1.onclick = function(){
            console.log(input1.value);
        }
    </script>
    
    <!-- 2.修改：文本框实现数字自增，使用parseInt转换类型 -->
    <input id="m2" type="text">
    <button id="b2">单值自增</button>   <br>
    <script>
        let input2 = document.querySelector('#m2');
        let button2 = document.querySelector('#b2');
        button2.onclick = function(){
            let val = parseInt(input2.value);
            val += 1;
            input2.value = val;
        }
    </script>

    <!-- 3.修改：实现密码显示和隐式的切换 -->
    <input id="m3" type="password">
    <button id="b3">显示密码</button>
    <script>
        let input3 = document.querySelector('#m3');
        let button3 = document.querySelector('#b3');
        button3.onclick = function(){
            let type = input3.type;
            if(type=="text"){
                input3.type = "password";
                button3.innerHTML = "显示密码";
            }else{
                input3.type = "text";
                button3.innerHTML = "隐藏密码";
            }
        }
    </script>
    
</body>
</html>